<template>
  <div class="jobSeekerRegisterContainer">
    <div class="input-container">
      <el-tabs
        class="tab-container"
        v-model="activeName"
        type="border-card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="账号信息" name="first">
          <el-form
            :model="personalInformationFormData"
            ref="personalInformationForm"
            label-width="100px"
            class="personalInformationFormData"
          >
            <el-form-item label="头像" prop="avatar">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="personalInformationFormData.avatar"
                  :src="personalInformationFormData.avatar"
                  class="avatar"
                  style="max-width: 100px; max-height: 100px"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="personalInformationFormData.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="personalInformationFormData.password"
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="resetPassword">
              <el-input
                v-model="personalInformationFormData.resetPassword"
                placeholder="确认密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="name">
              <el-input
                v-model="personalInformationFormData.name"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input
                v-model="personalInformationFormData.phone"
                placeholder="请电话号码"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button
            style="margin-left: 84%"
            class="submit-button"
            type="primary"
            @click="submit"
          >
            完成注册
          </el-button>
        </el-tab-pane>
        <el-tab-pane label="绑定邮箱" name="fifth">
          <el-form-item label="邮箱" prop="email">
            <div class="email">
              <el-input
                v-model="personalInformationFormData.email"
                placeholder="请输入邮箱"
                style="width: 280px"
              ></el-input>
              <el-button
                style="margin-left: 10px; width: 160px"
                type="primary"
                @click="getVerificationCode"
              >
                获取邮箱验证码
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="验证码" prop="captcha">
            <el-input
              v-model="personalInformationFormData.captcha"
              placeholder="请输入邮箱验证码"
              style="width: 432px"
            ></el-input>
          </el-form-item>
          <el-button
            style="margin-left: 72%"
            class="submit-button"
            type="primary"
            @click="bondEmail"
          >
            绑定邮箱
          </el-button>
        </el-tab-pane>
        <el-tab-pane label="个人简历" name="second">
          <el-form
            :model="resumeData"
            ref="resumeForm"
            label-width="100px"
            class="companyInformationFormData"
          >
            <el-row>
              <el-col :span="10">
                <el-form-item label="真实姓名" prop="realname">
                  <el-input v-model="resumeData.realname"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="性别" prop="gender">
                  <el-select
                    v-model="resumeData.gender"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="出生日期" required>
                  <el-form-item prop="birthdate">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="resumeData.birthdate"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="求职状态" prop="status">
                  <el-select
                    v-model="resumeData.status"
                    placeholder="请选择求职状态"
                  >
                    <el-option label="正在找工作" :value="1"></el-option>
                    <el-option label="考虑机会" :value="2"></el-option>
                    <el-option label="暂不考虑" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="resumeData.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-form-item label="电话" prop="phone">
                <el-input v-model="resumeData.phone"></el-input>
              </el-form-item>
              <el-col :span="10"></el-col>
            </el-row>
            <el-form-item label="当前城市" prop="currentCity">
              <el-input v-model="resumeData.currentCity"></el-input>
            </el-form-item>
            <el-form-item label="优点" prop="advantage">
              <el-input v-model="resumeData.advantage"></el-input>
            </el-form-item>
            <el-form-item label="工作经历" prop="workExperience">
              <v-md-editor
                style="height: 500px"
                v-model="resumeData.workExperience"
                mode="edit"
              ></v-md-editor>
            </el-form-item>
            <el-form-item label="项目经历" prop="projectExperience">
              <v-md-editor
                v-model="resumeData.projectExperience"
                mode="edit"
              ></v-md-editor>
            </el-form-item>
          </el-form>
          <el-tooltip
            class="input-companyId"
            effect="dark"
            content="不要忘记为简历添加教育经历和求职期望"
            placement="top"
          >
            <el-button
              style="margin-left: 84%"
              type="primary"
              @click="submitResume"
            >
              提交简历
            </el-button>
          </el-tooltip>
        </el-tab-pane>
        <el-tab-pane label="教育经历" name="third">
          <el-form
            :model="educationFormData"
            ref="educationForm"
            label-position="top"
          >
            <el-row>
              <el-col :span="10">
                <el-form-item label="学校名称" prop="educationExperience">
                  <el-input
                    v-model="educationFormData.schoolName"
                    placeholder="请输入学校名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="专业" prop="major">
                  <el-input
                    v-model="educationFormData.major"
                    placeholder="请输入专业"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="学制类型" prop="type">
                  <el-radio-group v-model="educationFormData.type">
                    <el-radio :label="1">全日制</el-radio>
                    <el-radio :label="2">非全日制</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="学历" prop="education">
                  <el-select
                    v-model="educationFormData.education"
                    placeholder="请选择学历"
                  >
                    <el-option label="高中及以下" :value="1"></el-option>
                    <el-option label="大专" :value="2"></el-option>
                    <el-option label="本科" :value="3"></el-option>
                    <el-option label="硕士" :value="4"></el-option>
                    <el-option label="博士" :value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="入学年份" prop="enrollmentYear">
                  <el-input
                    v-model="educationFormData.enrollmentYear"
                    placeholder="请填写入学年份"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="毕业年份" prop="graduationYear">
                  <el-input
                    v-model="educationFormData.graduationYear"
                    placeholder="请填写毕业年份"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="在校经历" prop="schoolExperience">
              <el-input
                v-model="educationFormData.schoolExperience"
                type="textarea"
                placeholder="请输入在校经历"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="求职期望" name="fourth">
          <el-form :model="expectForm" ref="expectForm" label-position="top">
            <el-form-item label="求职类型" prop="type">
              <el-radio-group v-model="expectFormData.type">
                <el-radio :label="1">全职</el-radio>
                <el-radio :label="2">兼职</el-radio>
                <el-radio :label="3">实习生</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row>
              <el-col :span="10">
                <el-form-item label="期望职业标签" prop="job_tag">
                  <el-select
                    v-model="expectFormData.job_tag"
                    placeholder="请选择期望职业标签"
                  >
                    <el-option label="程序员" :value="1"></el-option>
                    <el-option label="公务员" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="期望行业" prop="industry_id">
                  <el-select
                    v-model="expectFormData.industry_id"
                    placeholder="请选择期望职业标签"
                  >
                    <el-option label="it行业" :value="1"></el-option>
                    <el-option label="金融行业" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="期望城市" prop="city">
                  <el-input
                    v-model="expectFormData.city"
                    placeholder="请选择期望城市"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="其他城市" prop="other_city">
                  <el-input
                    v-model="expectFormData.other_city"
                    placeholder="请选择其他城市"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="最低薪资（单位：K）" prop="min_salary">
                  <el-input-number
                    v-model="expectFormData.min_salary"
                    :min="1"
                    label="请选择最低薪资"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最高薪资（单位：K）" prop="max_salary">
                  <el-input-number
                    v-model="expectFormData.max_salary"
                    :min="1"
                    label="请选择最高薪资"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <p style="margin-left: 20px">
        <router-link to="/login">前往登录</router-link>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '@/utils/token'
import {
  postUserOne,
  getEmailCaptchaBindingEmailByEmail,
  postUserEmail,
  putUserPhone,
  postSysResumeAdd,
  postSysEducationAdd,
  postExceptAdd,
  postUserSeeker,
} from '@/servers/controller'
import { useUserStoreHook } from '@/store/modules/user'

const userStore = useUserStoreHook()
const activeName = ref('first')

let personalInformationForm = ref()
const personalInformationFormData = reactive({
  username: '',
  password: '',
  resetPassword: '',
  avatar:
    'https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2024/03/26/341923d8-a69c-4c11-940a-22e9f1d8791b.png',
  email: '',
  phone: '',
  name: '',
  captcha: '',
})

let resumeForm = ref()
const resumeData = reactive({
  userId: 0,
  realname: '',
  gender: 1,
  birthdate: '',
  currentCity: '',
  email: '',
  phone: '',
  status: 1,
  advantage: '',
  workExperience: '',
  projectExperience: '',
})

let educationForm = ref()
const educationFormData = reactive({
  resumeId: 0,
  schoolName: '',
  type: 1,
  education: 1,
  major: '',
  enrollmentYear: '',
  graduationYear: '',
  schoolExperience: '',
})

let expectForm = ref()
const expectFormData = reactive({
  resumeId: 0,
  type: 1,
  job_tag: 1,
  city: '',
  other_city: '',
  min_salary: 1,
  max_salary: 1,
  industry_id: 1,
})

const handleAvatarSuccess = (res: any, file: any) => {
  personalInformationFormData.avatar = URL.createObjectURL(file.raw)
}

const beforeAvatarUpload = (file: any) => {
  const isJPG = file.type === 'image/jpeg'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

const rules = ref({
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
  date1: [
    { type: 'date', required: true, message: '请选择日期', trigger: 'change' },
  ],
  date2: [
    { type: 'date', required: true, message: '请选择时间', trigger: 'change' },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: '请至少选择一个活动性质',
      trigger: 'change',
    },
  ],
  resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
  desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
})

const handleClick = () => {
  console.log('tab click')
}

const submit = async () => {
  await register()
  await addPersonalInformation()
  await bondPhoneNumber()
  console.log('register')
}

//完成注册以及各种信息的绑定

//注册账号
const register = async () => {
  REMOVE_TOKEN()
  const registerForm = ref({
    username: personalInformationFormData.username,
    password: personalInformationFormData.password,
    resetPassword: personalInformationFormData.resetPassword,
  })
  //@ts-ignore
  await userStore.userRegister(registerForm.value)
}

//添加个人信息
const addPersonalInformation = async () => {
  const personalInformation = ref({
    avatar: personalInformationFormData.avatar,
    name: personalInformationFormData.name,
    phone: personalInformationFormData.phone,
  })
  const res = await postUserOne(personalInformation.value)
  if (res.data.code === 200) {
    console.log('添加用户信息成功')
  } else {
    ElMessage.error('添加用户信息失败')
  }
}

//为用户添加求职者角色
const addJobSeekerRole = async () => {
  const res = await postUserSeeker()
  if (res.data.code === 200) {
    console.log('添加求职者角色成功')
  } else {
    ElMessage.error('添加求职者角色失败')
  }
}

//获取邮箱验证码
const getVerificationCode = async () => {
  const res = await getEmailCaptchaBindingEmailByEmail({
    email: personalInformationFormData.email,
  })
  if (res.data.code === 200) {
    console.log('获取邮箱验证码成功')
  } else {
    ElMessage.error('获取邮箱验证码失败')
  }
}

//绑定邮箱
const bondEmail = async () => {
  const res = await postUserEmail({
    email: personalInformationFormData.email,
    captcha: personalInformationFormData.captcha,
  })
  if (res.data.code === 200) {
    console.log('绑定邮箱成功')
  } else {
    ElMessage.error('绑定邮箱失败')
  }
}

//绑定电话号码
const bondPhoneNumber = async () => {
  const res = await putUserPhone({
    phone: personalInformationFormData.phone,
  })
  if (res.data.code === 200) {
    console.log('绑定电话成功')
  } else {
    ElMessage.error('绑定电话失败')
  }
}

//添加简历
const addResume = async () => {
  await userStore.getUserInfo()
  //@ts-ignore
  resumeData.userId = userStore.userInfo.id
  const res = await postSysResumeAdd(resumeData)
  if (res.data.code === 200) {
    console.log('绑定简历成功')
    educationFormData.resumeId = res.data.data
    expectFormData.resumeId = res.data.data
  } else {
    ElMessage.error('绑定简历失败')
  }
}

//添加教育经历
const addEducation = async () => {
  const res = await postSysEducationAdd(educationFormData)
  if (res.data.code === 200) {
    console.log('简历添加教育经历成功')
  } else {
    ElMessage.error('简历添加教育经历失败')
  }
}

//添加求职期望
const addExpect = async () => {
  const res = await postExceptAdd(expectFormData)
  if (res.data.code === 200) {
    console.log('简历添加求职期望成功')
  } else {
    ElMessage.error('简历添加求职期望失败')
  }
}

//提交简历和相对的教育经历，求职期望
const submitResume = async () => {
  await addResume()
  await addEducation()
  await addExpect()
  await addJobSeekerRole()
}
</script>

<style lang="scss" scoped>
.input-container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.tab-container {
  min-width: 600px;
  min-height: 300px;
}

.jobSeekerRegisterContainer {
  overflow: auto;
  max-height: 700px; /* 设置最大高度，超出时将显示滚动条 */
}
</style>
